<script lang="ts" setup>
import UseButton from '@/components/use-btn/index.vue'
import UseCheckbox from '@/components/use-checkbox/index.vue'
import UseFixedBottom from '@/components/use-fixed-bottom/index.vue'
import UseUpload from '@/components/use-upload/index.vue'
import { FeedbackParams, LevelOption } from '@/models/feedback'
import { FeedbackType } from '@/models/sys'
import { getFeedbackOptions, submitFeedback } from '@/service/common'
import { awaitTo } from '@/utils'
import _ from 'lodash'

const props = withDefaults(
  defineProps<{
    isShowTitle?: boolean
    type: FeedbackType
    objectId?: number
  }>(),
  {
    isShowTitle: true,
  },
)

onMounted(() => {
  getData()
})

const levelOption = ref<LevelOption[]>([])
async function getData() {
  if (!props.type) return
  const { result } = await awaitTo(getFeedbackOptions({ type: props.type }))
  if (result.data) {
    levelOption.value = result.data
  }
}

const MAX_LENGTH = 200
const UPLOAD_MAX = 4

const emit = defineEmits(['close', 'success'])

function close() {
  emit('close')
}

const submit = _.debounce(
  async () => {
    if (!formData.value.options.length) {
      uni.showToast({
        title: '请选择反馈类型',
        icon: 'none',
      })
      return
    }
    formData.value.object_id = props.objectId || 0
    uni.showLoading({
      title: '提交中...',
    })
    const { result } = await awaitTo(submitFeedback(formData.value))
    if (result) {
      uni.showToast({
        title: '提交成功',
        icon: 'success',
      })
      emit('success')
      setTimeout(() => {
        formData.value = createFeedback()
      }, 500)
    }
  },
  500,
  {
    leading: true,
    trailing: false,
  },
)

const createFeedback = () => {
  const model: FeedbackParams = {
    type: FeedbackType.Recommend,
    level: 3,
    title: '',
    options: [],
    images: [],
    suggestion: '',
    object_id: 0,
  }

  return model
}
const formData = ref(createFeedback())

const state = computed(() => {
  const _value = formData.value.level

  if (!levelOption.value.length) {
    return {
      options: [],
      label: '',
    }
  }
  const list = levelOption.value?.find((item) => {
    return item.level === String(_value)
  })

  const options = list.options.map((item) => {
    return {
      label: item,
      value: item,
      check: false,
    }
  })

  return {
    options,
    label: list.title,
  }
})
</script>

<template>
  <view class="feedback">
    <view class="title" v-if="isShowTitle">
      <view class="w-5"></view>
      <view>需求反馈与建议</view>
      <wd-icon name="close" size="32rpx" @click="close"></wd-icon>
    </view>
    <div style="height: 32rpx" v-if="!isShowTitle"></div>
    <view class="content-views">
      <view class="card-info">
        <view class="tips">{{ state.label || '抱歉，麻烦您指出我们的问题' }}</view>
        <view class="flex justify-center mt-3 mb-4">
          <wd-rate v-model="formData.level" size="54rpx" space="30rpx" />
        </view>
        <view class="flex flex-wrap">
          <UseCheckbox v-model="formData.options" :list="state.options"></UseCheckbox>
        </view>
        <view class="input-textarea">
          <textarea
            v-model="formData.suggestion"
            :maxlength="MAX_LENGTH"
            placeholder="请留下您的宝贵意见，我们会努力改善~"
          ></textarea>
          <view class="num">{{ formData.suggestion.trim().length }}/{{ MAX_LENGTH }}</view>
        </view>
      </view>

      <view class="card-info p-4 mt-3">
        <view class="upload-title">
          <view class="left">添加截图（选填）</view>
          <view class="right">{{ formData.images.length }}/{{ UPLOAD_MAX }}</view>
        </view>
        <UseUpload v-model="formData.images" multiple :limit="UPLOAD_MAX"></UseUpload>
      </view>
    </view>

    <UseFixedBottom is-fixed :boxHeight="200">
      <view class="pl-4 pr-4">
        <UseButton @click="submit">提交</UseButton>
      </view>
    </UseFixedBottom>
  </view>
</template>

<style lang="scss" scoped>
.upload-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24rpx;

  .left {
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 32rpx;
    font-weight: 400;
    color: #2e2e2a;
  }

  .right {
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    color: #9fa3aa;
  }
}

.feedback {
  position: relative;
  min-height: 100%;
  background: #f8f9fb;

  .input-textarea {
    position: relative;
    padding: 32rpx;
    padding-bottom: 50rpx;
    margin: 0 32rpx;
    background: #f8f9fb;
    border-radius: 8rpx;

    textarea {
      width: 100%;
      margin-bottom: 10rpx;
    }

    .num {
      position: absolute;
      right: 24rpx;
      bottom: 16rpx;
      font-family:
        PingFangSC,
        PingFang SC;
      font-size: 24rpx;
      font-weight: 400;
      color: #9fa3aa;
    }
  }

  .title {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 22;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 106rpx;
    padding: 0 24rpx;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 32rpx;
    font-weight: 500;
    color: #2b2f36;
    background: #f8f9fb;
  }

  .content-views {
    padding: 0 24rpx;
  }

  .card-info {
    padding-bottom: 20rpx;
    overflow: hidden;
    background: #ffffff;
    border-radius: 16rpx;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(183, 189, 200, 0.1);

    .tips {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 108rpx;
      background: #fef8e0;
      border: 4rpx solid #ffffff;
      border-radius: 16rpx 0rpx 0rpx;
    }
  }
}
</style>
